<!--  -->
<template>
  <div>
    <nav-bar class="home-nav">
      <span slot="center">购物街</span>
    </nav-bar>
    <home-swiper :banners="banners"></home-swiper>
    <recommend-view :recommends="recommends"></recommend-view>
  </div>
</template>

<script>
import NavBar from 'common/navbar/NavBar'
import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'

import {getHomeMultiData} from 'network/home'

export default {
  data() {
    return {
      banners: [],
      recommends: []
    }
  },
  components: {
    NavBar,
    HomeSwiper,
    RecommendView
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    getHomeMultiData().then(res=>{
      this.banners = res.data.banner.list
      this.recommends = res.data.recommend.list
    })
    // console.log(this.result) // 上面方法是异步的，这里不一定能拿到
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.home-nav{
  background-color: var(--color-tint);
  color: #fff;
}
</style>
